<template>
  <PageWrapper>
    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="文档">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

    <CollapseContainer class="mt-5" title="响应式-基本类型">
      <ol>
        <li>字符串:{{ str }}<Button @click="str += '~'">修改</Button></li>
        <li>布尔类型:{{ b }}<Button @click="b = !b">修改</Button></li>
        <li>数字类型:{{ n }}<Button @click="n += 1">修改</Button></li>
      </ol>
      <template #action>
        <Icon icon="ant-design:code-outlined" class="mr-1" :size="26" @click="openSource('基本类型', getBasic())" />
      </template>
    </CollapseContainer>


    <!-- 源码组件 -->
    <SourceDrawer ref="sourceDrawer" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';
  import { PageWrapper } from '@/components/Page';
  import { Button } from '@/components/Button';
  import SourceDrawer from '@/learn/SourceDrawer.vue';
  import { ref, toRefs } from 'vue';
  import { Icon } from '@/components/Icon';

  // 定义子组件引用
  let sourceDrawer = ref<any>(null);

  function openSource(title: string, content: string) {
    sourceDrawer.value.open({ title, content, width: '60%' });
  }

  let person = ref({
    name: 'zhangsan',
    age: 20,
  });



  // 基本类型
  let b = ref(true);
  let str = ref('');
  let n = ref(0);

</script>

<script lang="ts">
  function getDoc() {
    return `
### 核心特点
* ref 可用于基本类型、对象类型、数组类型
* ref 会将原对象封装为 RefImpl 对象，原对象作为其 value 属性
* ref 支持对象本身替换，即地址替换。替换后依然具有响应式，因为页面组件持有的是 RefImpl 的地址引用，而非原对象的地址引用
* 解构语法相当于赋值，新生成的对象不具有实时响应性，需要通过 toRef 或 toRefs 修饰为响应对象。

`;
  }

  function getBasic() {
    return `
\`\`\`html
<template>
<CollapseContainer class="mt-5" title="响应式-基本类型">
  <ol>
    <li>字符串:{{ str }}<Button @click="str += '~'">修改</Button></li>
    <li>布尔类型:{{ b }}<Button @click="b = !b">修改</Button></li>
    <li>数字类型:{{ n }}<Button @click="n += 1">修改</Button></li>
  </ol>
  <template #action>
    <Icon icon="ant-design:code-outlined" class="mr-1" :size="26" @click="openSource('对象引用', getBasic())" />
  </template>
</CollapseContainer>
</template>

\<script lang="ts" setup\>
  import { ref } from 'vue';
  // 基本类型, ref 变量不需要使用 :ref 指定类型
  let b = ref(true);
  let str = ref('');
  let n = ref(0);
\</script\>
\`\`\`
`;
  }

</script>

<style lang="less" scoped>
  button {
    margin-left: 5px;
  }
</style>
